The following page provides a list of examples that demonstrate how to customize the appearance of table views. For more table view-related information, refer to the Table View topic.
Adding an InsertionRow to the fixed headers
The following example demonstrates how to add an InsertionRow to the fixed header section of a grid.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:TableView> <xcdg:TableView.FixedHeaders> <DataTemplate> <xcdg:InsertionRow/> </DataTemplate> </xcdg:TableView.FixedHeaders> </xcdg:TableView> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
Clearing a fixed header section
The following example demonstrates how to clear the content of all header and footer sections of a grid using its view's UseDefaultHeadersFooters property.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:CardView UseDefaultHeadersFooters="False"/> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
Dim view As New CardView() view.UseDefaultHeadersFooters = False dataGridControl.View = view |
C# |
Copy Code |
---|---|
CardView view = new CardView(); view.UseDefaultHeadersFooters = false; dataGridControl.View = view; |
Adding vertical and horizontal grid lines
The following example demonstrates how to add vertical and horizontal grid lines to a grid in table-view layout. A style for the ColumnManagerRow objects has been added to the resources to remove the horizontal grid line drawn above the column-manager row in the fixed headers.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <Style TargetType="{x:Type xcdg:ColumnManagerRow}"> <Setter Property="BorderThickness" Value="0"/> </Style> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:TableView HorizontalGridLineThickness="1" VerticalGridLineThickness="1"> <xcdg:TableView.HorizontalGridLineBrush> <SolidColorBrush Color="Orange"/> </xcdg:TableView.HorizontalGridLineBrush> <xcdg:TableView.VerticalGridLineBrush> <SolidColorBrush Color="Orange"/> </xcdg:TableView.VerticalGridLineBrush> </xcdg:TableView> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
Dim view As New TableView() view.HorizontalGridLineThickness = 1 view.VerticalGridLineThickness = 1 view.HorizontalGridLineBrush = Brushes.Orange view.VerticalGridLineBrush = Brushes.Orange dataGridControl.View = view |
C# |
Copy Code |
---|---|
TableView view = new TableView();
view.HorizontalGridLineThickness = 1;
view.VerticalGridLineThickness = 1;
view.HorizontalGridLineBrush = Brushes.Orange;
view.VerticalGridLineBrush = Brushes.Orange;
dataGridControl.View = view; |
Hiding the group-level indicator pane
The following example demonstrates how to hide the group-level indicator pane by creating a style which sets the Visibility property of GroupLevelIndicatorPane objects to Collapsed.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <Style TargetType="{x:Type xcdg:GroupLevelIndicatorPane}"> <Setter Property="Visibility" Value="Collapsed"/> </Style> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"> <xcdg:DataGridCollectionViewSource.GroupDescriptions> <xcdg:DataGridGroupDescription PropertyName="ShipCountry"/> </xcdg:DataGridCollectionViewSource.GroupDescriptions> </xcdg:DataGridCollectionViewSource> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"/> </Grid> |
Hiding the row-selector pane
The following example demonstrates how to hide the row-selector pane.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:TableView ShowRowSelectorPane="False"/> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
Dim view As New TableView() view.ShowRowSelectorPane = False dataGridControl.View = view |
C# |
Copy Code |
---|---|
TableView view = new TableView(); view.ShowRowSelectorPane = false; dataGridControl.View = view; |
Fixing columns
The following example demonstrates how to fix the ShipCountry and ShipCity columns.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.Columns> <xcdg:Column FieldName="ShipCountry" VisiblePosition="0"/> <xcdg:Column FieldName="ShipCity" VisiblePosition="1"/> </xcdg:DataGridControl.Columns> <xcdg:DataGridControl.View> <xcdg:TableView FixedColumnCount="2"/> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
dataGridControl.Columns( "ShipCountry" ).VisiblePosition = 0 dataGridControl.Columns( "ShipCity" ).VisiblePosition = 1 Dim view As New TableView() view.FixedColumnCount = 2 dataGridControl.View = view |
C# |
Copy Code |
---|---|
dataGridControl.Columns[ "ShipCountry" ].VisiblePosition = 0; dataGridControl.Columns[ "ShipCity" ].VisiblePosition = 1; TableView view = new TableView(); view.FixedColumnCount = 2; dataGridControl.View = view; |
Allowing horizontal scrolling
The following example demonstrates how to prevent horizontal scrolling of the group-by control in the fixed header section.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}"> <xcdg:DataGridCollectionViewSource.GroupDescriptions> <xcdg:DataGridGroupDescription PropertyName="ShipCountry"/> </xcdg:DataGridCollectionViewSource.GroupDescriptions> </xcdg:DataGridCollectionViewSource> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:TableView UseDefaultHeadersFooters="False"> <xcdg:TableView.FixedHeaders> <DataTemplate> <xcdg:GroupByControl xcdg:TableView.CanScrollHorizontally="True"/> </DataTemplate> <DataTemplate> <xcdg:ColumnManagerRow/> </DataTemplate> </xcdg:TableView.FixedHeaders> </xcdg:TableView> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
Using routed view properties
The following example demonstrates how to set routed view properties on detail configurations to change the width of their detail indicators as well as to fix columns and remove the fixed-column splitter.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid" xmlns:local="clr-namespace:Xceed.Wpf.Documentation"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_employees" Source="{Binding Source={x:Static Application.Current}, Path=Employees}" /> </Grid.Resources> <xcdg:DataGridControl x:Name="EmployeesGrid" ItemsSource="{Binding Source={StaticResource cvs_employees}}" AutoCreateDetailConfigurations="True"> <xcdg:DataGridControl.Columns> <xcdg:Column FieldName="Photo" Visible="False" /> </xcdg:DataGridControl.Columns> <xcdg:DataGridControl.DetailConfigurations> <xcdg:DetailConfiguration RelationName="Employee_Orders" Title="Employee Orders" xcdg:TableView.DetailIndicatorWidth="50" xcdg:TableView.FixedColumnCount="2"> <xcdg:DetailConfiguration.Columns> <xcdg:Column FieldName="EmployeeID" Visible="False" /> </xcdg:DetailConfiguration.Columns> <xcdg:DetailConfiguration.DetailConfigurations> <xcdg:DetailConfiguration RelationName="Order_OrderDetails" Title="Order Details" xcdg:TableView.ShowFixedColumnSplitter="False" xcdg:TableView.DetailIndicatorWidth="50"/> </xcdg:DetailConfiguration.DetailConfigurations> </xcdg:DetailConfiguration> </xcdg:DataGridControl.DetailConfigurations> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
dataGridControl.AutoCreateDetailConfigurations = True dataGridControl.Columns( "Photo" ).Visible = False Dim detailConfiguration As New DetailConfiguration() detailConfiguration.RelationName = "Employee_Orders" detailConfiguration.Title = "Employee Orders" detailConfiguration.Columns( "EmployeeID" ).Visible = False detailConfiguration.SetValue( TableView.DetailIndicatorWidthProperty, 50 ) detailConfiguration.SetValue( TableView.FixedColumnCountProperty, 2 ) Dim childDetailConfiguration As New DetailConfiguration() childDetailConfiguration.RelationName = "Order_OrderDetails" childDetailConfiguration.Title = "Order Details" childDetailConfiguration.SetValue( TableView.ShowFixedColumnSplitterProperty, false ) childDetailConfiguration.SetValue( TableView.DetailIndicatorWidthProperty, 50 ) detailConfiguration.DetailConfigurations.Add( childDetailConfiguration ) dataGridControl.DetailConfigurations.Add( detailConfiguration ) |
C# |
Copy Code |
---|---|
dataGridControl.AutoCreateDetailConfigurations = true; dataGridControl.Columns[ "Photo" ].Visible = false; DetailConfiguration detailConfiguration = new DetailConfiguration(); detailConfiguration.RelationName = "Employee_Orders"; detailConfiguration.Title = "Employee Orders"; detailConfiguration.Columns[ "EmployeeID" ].Visible = false; detailConfiguration.SetValue( TableView.DetailIndicatorWidthProperty, 50 ); detailConfiguration.SetValue( TableView.FixedColumnCountProperty, 2 ); DetailConfiguration childDetailConfiguration = new DetailConfiguration(); childDetailConfiguration.RelationName = "Order_OrderDetails"; childDetailConfiguration.Title = "Order Details"; childDetailConfiguration.SetValue( TableView.ShowFixedColumnSplitterProperty, false ); childDetailConfiguration.SetValue( TableView.DetailIndicatorWidthProperty, 50 ); detailConfiguration.DetailConfigurations.Add( childDetailConfiguration ); dataGridControl.DetailConfigurations.Add( detailConfiguration ); |
Stretching columns
The following example demonstrates how to stretch all the columns in a grid equally so that they occupy the full width available in the viewport.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_orders" Source="{Binding Source={x:Static Application.Current}, Path=Orders}" AutoCreateItemProperties="False"> <xcdg:DataGridCollectionViewSource.ItemProperties> <xcdg:DataGridItemProperty Name="ShipCountry" /> <xcdg:DataGridItemProperty Name="ShipCity" /> <xcdg:DataGridItemProperty Name="ShipRegion" /> <xcdg:DataGridItemProperty Name="ShipVia" /> </xcdg:DataGridCollectionViewSource.ItemProperties> </xcdg:DataGridCollectionViewSource> </Grid.Resources> <xcdg:DataGridControl x:Name="OrdersGrid" ItemsSource="{Binding Source={StaticResource cvs_orders}}"> <xcdg:DataGridControl.View> <xcdg:TableView ColumnStretchMode="All" ColumnStretchMinWidth="100"/> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
Dim collectionView As New DataGridCollectionView( Orders, GetType( System.Data.DataRow ), False, False ) collectionView.ItemProperties.Add( New DataGridItemProperty( "ShipCountry", GetType( String ) ) ) collectionView.ItemProperties.Add( New DataGridItemProperty( "ShipCity", GetType( String ) ) ) collectionView.ItemProperties.Add( New DataGridItemProperty( "ShipRegion", GetType( String ) ) ) collectionView.ItemProperties.Add( New DataGridItemProperty( "ShipVia", GetType( Integer ) ) ) Dim view As New TableView() view.ColumnStretchMode = ColumnStretchMode.All view.ColumnStretchMinWidth = 100 dataGridControl.View = view dataGridControl.ItemsSource = collectionView |
C# |
Copy Code |
---|---|
DataGridCollectionView collectionView = new DataGridCollectionView( Orders, typeof( System.Data.DataRow ), false, false ); collectionView.ItemProperties.Add( new DataGridItemProperty( "ShipCountry", typeof( string ) ) ); collectionView.ItemProperties.Add( new DataGridItemProperty( "ShipCity", typeof( string ) ) ); collectionView.ItemProperties.Add( new DataGridItemProperty( "ShipRegion", typeof( string ) ) ); collectionView.ItemProperties.Add( new DataGridItemProperty( "ShipVia", typeof( int) ) ); TableView view = new TableView(); view.ColumnStretchMode = ColumnStretchMode.All; view.ColumnStretchMinWidth = 100; dataGridControl.View = view; dataGridControl.ItemsSource = collectionView; |
Applying a grid background brush
The following example demonstrates how to apply a one of the custom background brushes (provided by Xceed) to a grid's background.
XAML |
Copy Code |
---|---|
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"> <Grid.Resources> <xcdg:DataGridCollectionViewSource x:Key="cvs_products" Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/> </Grid.Resources> <xcdg:DataGridControl x:Name="ProductsGrid" ItemsSource="{Binding Source={StaticResource cvs_products}}" Background="{x:Static xcdg:DataGridControlBackgroundBrushes.AuroraRed}"> <xcdg:DataGridControl.Columns> <xcdg:Column FieldName="ProductName" IsMainColumn="True"/> </xcdg:DataGridControl.Columns> <xcdg:DataGridControl.View> <!-- In Cardflow 3D view, if a theme is not explicitly specified, the Elemental Black theme will be used. --> <xcdg:CardflowView3D CardHeightToViewportRatio="0.5"/> </xcdg:DataGridControl.View> </xcdg:DataGridControl> </Grid> |
VB.NET |
Copy Code |
---|---|
dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed |
C# |
Copy Code |
---|---|
dataGridControl.Background = DataGridControlBackgroundBrushes.AuroraRed; |